<html>
<head>
    <title>Code Endeavors DotNetNuke Templates</title>
    <link rel="stylesheet" type="text/css" href="Documentation.css">
</head>
<body bottommargin="5" leftmargin="5" topmargin="5" rightmargin="5" marginwidth="0" marginheight="0">
    <a href="http://www.codeendeavors.com"><img src="logo.gif" border="0"></a>
    <h1>DotNetNuke $safeprojectname$ Skin</h1>
    <h2>Introduction</h2>
    <p>Congratulations! You have created your own DotNetNuke Skin.&nbsp; Please
        take a few minutes to read this document, which will help you install and configure
        your new skin.</p>
    <hr />
    <h2>Getting Started</h2>
    <p>
        <a href="http://blip.tv/file/get/Codeendeavors-UtilizingNewCssFeaturesInVersion20OfTheDotNetNukeMenu778.wmv" style="float: left"><img alt="WebCast" src="CodeEndeavorsWebCasts.png" border="0"
            style="width: 150px; height: 45px; margin-right: 5px;" /></a>The latest version of the webcontrols including in DotNetNuke 5.0 includes some nice features geared towards
            skin developers.  This template was created to assist the community in unlocking some of the features including animation and greater css control.  
            A couple months back I created <a href="http://blip.tv/file/get/Codeendeavors-UtilizingNewCssFeaturesInVersion20OfTheDotNetNukeMenu778.wmv">a video</a> that 
        explained how easy it is to tweak nearly every aspect of the menu with a few css 
        tweaks.  
            It starts out giving a brief overview of where we came from in earlier releases and how we are making strides to improve the ability for both a DotNetNuke skinner 
            and end portal administrator.</p>
    <p>
        The default skin created from this template utilizes this knowledge and 
        hopefully will inspire some skinners to create 
        some truely unique skins.
            </p>
    <p>
        Here is a quick cheat-sheet of the css class names that the menu supports</p>
    <table class="cheatSheet" cellspacing="0">
        <tr>
            <th>Class</th>
            <th>Description</th>
            <th>Sample</th>
            <th>Explanation</th>
        </tr>
        <tr>
            <td>
                .m</td>
            <td>
                All Sub Menu</td>
            <td>
                .m</td>
            <td>
                All sub menus</td>
        </tr>
        <tr>
            <td>
                .m[level]</td>
            <td>
                Sub Menu at Level x</td>
            <td>
                .m0</td>
            <td>
                First level sub menus</td>
        </tr>
        <tr>
            <td>
                .mid[id]</td>
            <td>
                Sub Menu with ID x</td>
            <td>
                .mid39</td>
            <td>
                DNN Admin Sub Menu</td>
        </tr>
        <tr>
            <td>
                .break</td>
            <td>
                Break</td>
            <td>
                .break</td>
            <td>
                All menu breaks</td>
        </tr>
        <tr>
            <td>
                .mi</td>
            <td>
                Menu Item (all)</td>
            <td>
                .mi</td>
            <td>
                All Menu Items</td>
        </tr>
        <tr>
            <td>
                .id</td>
            <td>
                Menu Item with ID x</td>
            <td>
                .id41</td>
            <td>
                Menu Item with ID 41</td>
        </tr>
        <tr>
            <td>
                .mi[path]</td>
            <td>
                Menu Item in Specific Path</td>
            <td>
                .mi0<br />
                .mi1-0</td>
            <td>
                First Menu Item (Home)<br />
                First child of second root menu</td>
        </tr>
        <tr>
            <td>
                .root</td>
            <td>
                Root Menu Item</td>
            <td>
                .root</td>
            <td>
                All root menu items</td>
        </tr>
        <tr>
            <td>
                .first</td>
            <td>
                First Menu Item</td>
            <td>
                .first<br />
                .root.first</td>
            <td>
                First menu item in each menu<br />
                First menu item in root only</td>
        </tr>
        <tr>
            <td>
                .last</td>
            <td>
                Last Menu Item</td>
            <td>
                .last<br />
                .first.last</td>
            <td>
                Last menu item in each menu<br />
                Menu items with only one item (both 1st and last)</td>
        </tr>
        <tr>
            <td>
                .icn</td>
            <td>
                Icon</td>
            <td>
                .first.icn</td>
            <td>
                First Icon container in all menus</td>
        </tr>
        <tr>
            <td>
                .hov</td>
            <td>
                Hover</td>
            <td>
                .root.first.hov</td>
            <td>
                First menu item hover</td>
        </tr>
        <tr>
            <td>
                .sel</td>
            <td>
                Selected</td>
            <td>
                .m .sel</td>
            <td>
                Selected sub menu items</td>
        </tr>
        <tr>
            <td>
                .bc</td>
            <td>
                BreadCrumb</td>
            <td>
                .m .bc</td>
            <td>
                Breadcrum sub menu items</td>
        </tr>
        <tr>
            <td>
                .txt</td>
            <td>
                Text (Coming Soon!)</td>
            <td>
                .m .txt</td>
            <td>
                Text portion of all sub menu items<br />
                <b>Not Implemented Yet</b> </td>
        </tr>
        <tr>
            <td>
                *</td>
            <td>
                All child elements</td>
            <td>
                .m .mi *</td>
            <td>
                All elements within menu item</td>
        </tr>
    </table>
    <p>
        Further customizations are possible, as all of this is based off of CSS.  I highly recommend brushing up
        on <a href="http://www.w3.org/TR/CSS2/selector.html">CSS Selectors</a>.
    </p>
    <hr />
    <h2 class="important">* Important *</h2>
    In order to provide the optimal experience, this template has made the following assumptions
    <ol>
        <li>The directory structure where you created your skin has configured a lib directory with the baseline files your 
            skin will reference.
            Unlike a module, your skin does not reference any of the dlls found here.&nbsp; 
            However, the custom msbuild tasks are necessary to automate the packaging of 
            your skin.&nbsp;
        The directory structure will look like this
        <ul class="directory">
            <li><i>&nbsp;* RootDevFolder</i> 
                <ul>
                    <li>&nbsp;lib
                    <ul>
                        <li class="folder">msbuild</li>
                        <li>&nbsp;DotNetNuke.dll</li>
                        <li>&nbsp;Microsoft.ApplicationBlocks.Data.dll</li>
                        <li>&nbsp;System.Web.Extensions.dll</li>
                        <li>&nbsp;DotNetNuke.WebUtility.dll</li>
                    </ul>
                    </li>
                    <li><i>&nbsp;* Skin Project Folder</i></li>
                </ul>            
            </li>
        </ul>
            * <i>Italic folders can be any name</i> <br />
            &nbsp;<br />
        </li>
    </li>
    </ol>
    
    <hr />
    <h3>Installing your skin</h3>
    The skin project already automatically packages your code for you into the standard zip file when you build your project.  Both the installation
    and distribution packages are created in your RootDevFolder\deploy folder.  The module has also been configured to automatically deploy itself to
    the dotnetnuke installation specified in the wizard.  
    To install the module simply navigate to the following url <a href="http://localhost/DotNetNuke_2/install/install.aspx?mode=installresources">http://localhost/DotNetNuke_2/install/install.aspx?mode=installresources</a>
    (where DotNetNuke_2 is the name of your site).
    <br />
    <p class="important">Due to a bug in DNN5.0 the automatic installation of the skin through this url is broken.  It will appear to install successfully, but actually will do nothing.  
    You will need to install your skin through the normal installation process.</p>
    To change the configuration of where it gets deployed follow these directions
    <ol>
        <li>Open your DNNModule.targets file.</li>
        <li>Locate the line <span style="font-size: 12pt; color: blue; line-height: 115%;
            font-family: 'Courier New'; mso-no-proof: yes">&lt;</span><span style="font-size: 12pt;
                color: #a31515; line-height: 115%; font-family: 'Courier New'; mso-no-proof: yes">DotNetNukeDir</span><span
                    style="font-size: 12pt; color: blue; line-height: 115%; font-family: 'Courier New';
                    mso-no-proof: yes">&gt;&lt;/</span><span style="font-size: 12pt; color: #a31515;
                        line-height: 115%; font-family: 'Courier New'; mso-no-proof: yes">DotNetNukeDir</span><span
                            style="font-size: 12pt; color: blue; line-height: 115%; font-family: 'Courier New';
                            mso-no-proof: yes">&gt;</span> and place your dotnetnuke folder location in between (<span style="font-size: 12pt"><span style="color: #0000ff; font-family: Courier New">&lt;</span><span style="color: #a31515; line-height: 115%; font-family: 'Courier New'; mso-no-proof: yes">DotNetNukeDir</span><span
                    style="color: blue; line-height: 115%; font-family: 'Courier New';
                    mso-no-proof: yes">&gt;<span
                        style="color: #000000; font-family: Courier New">$DotNetNukeDir$</span>&lt;/</span><span style="color: #a31515;
                        line-height: 115%; font-family: 'Courier New'; mso-no-proof: yes">DotNetNukeDir</span><span
                            style="color: blue; line-height: 115%; font-family: 'Courier New';
                            mso-no-proof: yes">&gt;</span></span>)</li>
        <li>Close and re-open your project.  Your changes to the MSBuild script will not take affect until you do so!</li>                                
        <li>After compiling your skin, the installation file will be copied to your dotnetnuke
            site ready to invoke installation.&nbsp; </li>
    </ol>
    Your skin should now be installed, and you can add it to a page in the usuall manner.
    <hr />
    <h3>Further Resources</h3>
    <p>The information in this page is only an overview. For more information, visit <a href="http://www.codeendeavors.com">www.codeendeavors.com</a> 
        and <a href="http://www.dotnetnuke.com">www.dotnetnuke.com</a>.
    </p>
</body>
</html>
